<template>
  <div>
    <a-table :columns="columns" :data-source="dataSource" :pagination="ipagination" bordered @change="handleTableChange">
      <template
        v-for="col in [
          'controlCount',
          'designDefect',
          'generalDefect',
          'importDefect',
          'majorDefect',
          'finanDefect',
          'notFinanDefect',
          'remarks',
          'flowName',
          'runDefect',
        ]"
        :slot="col"
        slot-scope="text, record, index"
      >
        <div :key="col">
          <a-input
            v-if="record.editable"
            style="margin: -5px 0"
            :value="text"
            @change="(e) => handleChange(e.target.value, record.key, col)"
          />
          <template v-else>
            {{ text }}
          </template>
        </div>
      </template>
      <template slot="operation" slot-scope="text, record, index">
        <div class="editable-row-operations">
          <span v-if="record.editable">
            <a @click="() => save(record.key)">Save</a>
            <a-popconfirm title="Sure to cancel?" @confirm="() => cancel(record.key)">
              <a>Cancel</a>
            </a-popconfirm>
          </span>
          <span v-else>
            <a :disabled="editingKey !== ''" @click="() => edit(record.key)">Edit</a>
          </span>
        </div>
      </template>
      <span slot="actionName">
        <a-button size="small" @click="handleTableRowAdd" type="primary">新增</a-button>
      </span>

      <!-- <span slot="action" slot-scope="text, record, index">
        <a v-if="record.editable" @click="saveTableData">保存</a>
        <a-button v-else size="small" type="primary" icon="delete" @click="handleDel(record)">删除</a-button>
      </span> -->
      <span slot="action" slot-scope="text, record, index">
        <a v-if="record.editable" @click="saveTableData">保存</a>
        <a-popconfirm v-else :title="`确定要删除这项吗?`" @confirm="handleDel(record)">
          <a-button size="small" type="primary" icon="delete">删除</a-button>
        </a-popconfirm>
      </span>
    </a-table>

    <a-row style="margin-top: 10px; text-align: center">
      <!-- <a-button size="small" @click="handleExportTemp">模版导出</a-button>
      <a-upload
        name="file"
        :showUploadList="false"
        :multiple="false"
        :data="uploadParam"
        :headers="tokenHeader"
        :action="url.importExcelUrl"
        @change="handleImportExcel"
      >
        <a-button size="small" type="primary" style="margin: 0 15px; background-color: #1ea489; border: 0"
          >Excel导入</a-button
        >
      </a-upload> -->
      <!-- <a-button size="small" style="margin: 0 15px" @click="handleInput">导入</a-button> -->
      <a-button size="small" type="primary" style="margin-right: 15px" @click="handleExport">导出</a-button>
      <!-- TODO 预览 -->
      <a-button size="small" @click="handlePreview">在线预览</a-button>
    </a-row>

    <!-- <FileModel ref="fileModel" @openModelView="handleFileAdd"></FileModel> -->
  </div>
</template>

<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { columns5 } from '../indexColumns'
import { getAction, postAction, putAction } from '../../../../../../api/manage'
import FileModel from '../FileModel.vue'
import {Base64} from "js-base64";
export default {
  mixins: [JeecgListMixin],
  props: ['planId'],
  components: { FileModel },
  data() {
    return {
      columns: columns5(this),
      dataSource: [],
      selectedRows: [],
      url: {
        // list: '/sjzyzhgl/sjAuditOrg/list'
        list: '/incon/inconDefectReview/queryInconDefectReview',
        add: '/incon/inconDefectReview/createDefectReview',
        export: '/incon/inconDefectReview/exportByModuleFlag',
        del: '/incon/inconDefectReview/deleteInconDefectReview',
        exportTemp: '/incon/inconReviewPlan/downloadTemplate',
        upload: '/incon/inconDefectReview/importExcel',
        importExcelUrl: `${window._CONFIG['domianURL']}/incon/inconDefectReview/importExcel`,
      },
      editingKey: '',
      target: {},
      uploadParam: {
        planId: this.planId,
        moduleFlag: 'review',
      },
      disableMixinCreated: true,
    }
  },
  methods: {
    // TODO 在线预览
    async handlePreview() {
      const data = await getAction(`${this.url.export}?planId=${this.planId}&moduleFlag=review`)
      // let url = `${window._CONFIG['domianURL']}/sys/common/download/${data.result}`
      if (data.code == 0) {
        let fileUrl = `${window._CONFIG['onlinePreviewFileURL']}/sys/common/download${data.result}`
        // let url = `${window._CONFIG['onlinePreviewDomainURL']}?url=${encodeURIComponent(fileUrl)}`
        let url = `${window._CONFIG['onlinePreviewDomainURL']}?url=${encodeURIComponent(Base64.encode(fileUrl))}`
        window.open(url, '_blank')
      }
      // return url
    },
    handleInput() {
      this.$refs.fileModel.visible = true
    },
    async handleFileAdd(id) {
      // console.log(id,'id');
      const data = await postAction(`${this.url.upload}?planId=${this.planId}&moduleFlag=review`)
      if (+data.code == 200) {
        this.$refs.fileModel.visible = false
        this.loadData()
      }
    },
    async handleExport() {
      const data = await getAction(`${this.url.export}?planId=${this.planId}&moduleFlag=review`)

      if (+data.code == 0) this.handleDownloadFile(data.result)
    },
    async handleExportTemp() {
      const data = await getAction(`${this.url.exportTemp}?planId=${this.planId}&moduleFlag=review`)

      if (+data.code == 0) this.handleDownloadFile(data.result)
    },
    // TODO 列表删除
    async handleDel(row) {
      const data = await putAction(`${this.url.del}?id=${row.id}`)
      if (+data.code == 200) this.loadData()
    },
    handleTableRowAdd() {
      this.dataSource.push({
        controlCount: '',
        designDefect: '',
        generalDefect: '',
        importDefect: '',
        majorDefect: '',
        finanDefect: '',
        notFinanDefect: '',
        remarks: '',
        runDefect: '',
        flowName: '',
        editable: true,
      })
    },
    handleDownloadFile(fileUrl) {
      this.$message.success('正在下载，请稍等！')
      let url = `${window._CONFIG['domianURL']}/sys/common/download/${fileUrl}`
      window.open(url, '_blank')
    },
    // TODO
    handleChange(value, key, column) {
      console.log(value, key, column)
      const newData = [...this.dataSource]
      const target = newData.filter((item) => !item.id)[0]
      if (target) {
        target[column] = value
        this.dataSource = newData
        // console.log(target,'da');
        this.target = target
      }
    },
    async saveTableData() {
      let param = {
        ...this.target,
        planId: this.planId,
      }
      const data = await postAction(this.url.add, param)
      if (+data.code != 200) {
        this.$message.error(data.message)
      } else {
        this.$message.success(data.message)
        this.loadData()
      }
    },
  },
  watch: {
    planId: {
      handler(val) {
        this.url.list = `${this.url.list}?planId=${val}`
        this.loadData()
      },
      deep: true,
      immediate: true,
    },
  },
}
</script>

<style>
</style>
